<template>
  <div class="classics-container">
    <div class="banner">
      <div class="banner-content">
        <h1>经典剧目</h1>
        <p>传承经典，品味艺术，感受京剧之美</p>
      </div>
    </div>
    
    <div class="introduction-section">
      <div class="intro-content">
        <h2>京剧经典剧目</h2>
        <p>京剧是中国国粹，拥有数百年的悠久历史。京剧剧目丰富多彩，包括历史故事、神话传说、世情百态等多种题材。这里精选了众多经典剧目，每一部作品都凝聚着艺术家们的心血与智慧，让您领略中国传统戏曲的独特魅力。</p>
      </div>
    </div>

    <div class="filter-section">
      <div class="search-bar">
        <el-input 
          placeholder="搜索剧目名称" 
          v-model="searchQuery" 
          prefix-icon="el-icon-search" 
          clearable
          @clear="fetchDramas" 
          @keyup.enter.native="handleSearch">
          <el-button slot="append" icon="el-icon-search" @click="handleSearch"></el-button>
        </el-input>
      </div>
      
      <!-- <div class="filter-options">
        <div class="filter-item">
          <span class="filter-label">剧目类型:</span>
          <el-select 
            v-model="selectedTypes" 
            multiple 
            collapse-tags 
            placeholder="全部类型" 
            clearable
            @change="handleTypeChange">
            <el-option
              v-for="item in programTypeList"
              :key="item.programTypeId"
              :label="item.programTypeName"
              :value="item.programTypeId">
            </el-option>
          </el-select>
        </div>
      </div> -->
    </div>

    <div class="content-section">
      <div v-loading="loading" class="drama-grid">
        <div 
          v-for="drama in dramaList" 
          :key="drama.dramaId" 
          class="drama-card"
          @click="viewDramaDetail(drama)">
          <div class="drama-cover">
            <img :src="drama.imageUrl || '/images/default-drama.jpg'" alt="剧目封面" class="cover-image">
            <div class="drama-type-tags">
              <el-tag 
                v-for="typeId in getTypeIds(drama.programtypeId)"
                :key="typeId"
                size="mini" 
                type="success">
                {{ getTypeName(typeId) }}
              </el-tag>
            </div>
            
            <!-- 添加收藏按钮 -->
            <div class="favorite-btn" @click.stop="toggleFavorite(drama)">
              <i :class="['el-icon-star-on', {'is-favorite': isFavorite(drama.dramaId)}]"></i>
            </div>
          </div>
          <div class="drama-info">
            <h3 class="drama-name">{{ drama.dramaName }}</h3>
            <p class="drama-description">{{ drama.description | truncate }}</p>
          </div>
        </div>
        
        <div v-if="dramaList.length === 0 && !loading" class="no-data">
          <i class="el-icon-warning-outline"></i>
          <p>暂无符合条件的剧目</p>
        </div>
      </div>

      <div class="pagination-container" v-if="total > 0">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[12, 24, 36, 48]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>

    <!-- 剧目详情对话框 -->
    <el-dialog
      :title="currentDrama ? currentDrama.dramaName : ''"
      :visible.sync="dramaDetailVisible"
      width="70%"
      :fullscreen="false"
      class="drama-detail-dialog">
      <div v-if="currentDrama" class="drama-detail">
        <div class="drama-detail-header">
          <div class="drama-detail-cover">
            <img :src="currentDrama.imageUrl || '/images/default-drama.jpg'" alt="剧目封面" class="detail-cover-image">
          </div>
          <div class="drama-detail-info">
            <h2 class="drama-detail-name">{{ currentDrama.dramaName }}</h2>
            <div class="drama-detail-tags">
              <el-tag 
                v-for="typeId in getTypeIds(currentDrama.programtypeId)"
                :key="typeId"
                size="small" 
                type="success">
                {{ getTypeName(typeId) }}
              </el-tag>
            </div>
            <div class="drama-detail-description">
              <h4>剧目简介</h4>
              <p>{{ currentDrama.description }}</p>
            </div>
          </div>
        </div>
        
        <el-tabs v-model="activeTab" class="drama-media-tabs">
          <el-tab-pane label="视频资源" name="video">
            <div v-if="currentDrama.videoList && currentDrama.videoList.length > 0" class="video-list">
              <div 
                v-for="video in currentDrama.videoList" 
                :key="video.videoId"
                class="video-item"
                @click="playVideo(video)">
                <div class="video-thumb">
                  <i class="el-icon-video-play play-icon"></i>
                </div>
                <div class="video-info">
                  <h4 class="video-name">{{ video.videoName }}</h4>
                  <p class="video-description">{{ video.description }}</p>
                </div>
              </div>
            </div>
            <div v-else class="no-media">
              <i class="el-icon-video-camera"></i>
              <p>暂无视频资源</p>
            </div>
          </el-tab-pane>
          
          <el-tab-pane label="音频资源" name="audio">
            <div v-if="currentDrama.audioList && currentDrama.audioList.length > 0" class="audio-list">
              <div 
                v-for="audio in currentDrama.audioList" 
                :key="audio.audioId"
                class="audio-item">
                <div class="audio-icon">
                  <i class="el-icon-headset"></i>
                </div>
                <div class="audio-info">
                  <h4 class="audio-name">{{ audio.audioName }}</h4>
                  <p class="audio-description">{{ audio.description }}</p>
                </div>
                <div class="audio-controls">
                  <button class="audio-play-btn" @click="toggleAudioInList(audio)">
                    <i :class="isAudioPlayingInList(audio) ? 'el-icon-video-pause' : 'el-icon-video-play'"></i>
                  </button>
                  <span class="audio-time">{{ formatTime(audioProgress[audio.audioId]?.currentTime || 0) }}</span>
                  <input
                    type="range"
                    min="0"
                    :max="audioProgress[audio.audioId]?.duration || 0"
                    step="0.1"
                    :value="audioProgress[audio.audioId]?.currentTime || 0"
                    @input="seekAudioInList(audio, $event)"
                    class="audio-progress-bar"
                  />
                  <span class="audio-time">{{ formatTime(audioProgress[audio.audioId]?.duration || 0) }}</span>
                  <audio
                    v-show="false"
                    :ref="'audio_' + audio.audioId"
                    :src="audio.audioUrl"
                    @timeupdate="onAudioTimeUpdateInList(audio)"
                    @loadedmetadata="onAudioLoadedInList(audio)"
                    @ended="onAudioEndedInList(audio)"
                  ></audio>
                </div>
              </div>
            </div>
            <div v-else class="no-media">
              <i class="el-icon-headset"></i>
              <p>暂无音频资源</p>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-dialog>

    <!-- 视频播放对话框 -->
    <el-dialog
      title="视频播放"
      :visible.sync="videoPlayerVisible"
      width="80%"
      :fullscreen="false"
      class="video-player-dialog"
      @closed="stopVideo">
      <div v-if="currentVideo" class="video-player-container">
        <h3 class="video-player-title">{{ currentVideo.videoName }}</h3>
        <video 
          ref="videoPlayer"
          class="video-player"
          controls
          autoplay
          :src="currentVideo.videoUrl">
          您的浏览器不支持 HTML5 视频播放
        </video>
        <p class="video-player-description">{{ currentVideo.description }}</p>
      </div>
    </el-dialog>

    <!-- 音频播放器 -->
    <div class="audio-player-fixed" v-if="isAudioPlaying">
      <div class="audio-player-info">
        <div class="audio-player-icon">
          <i class="el-icon-headset"></i>
        </div>
        <div class="audio-player-text">
          <h4 class="audio-player-title">{{ currentAudio.audioName }}</h4>
          <audio 
            ref="audioPlayer" 
            :src="currentAudio.audioUrl" 
            autoplay 
            controls
            class="audio-element"
            @ended="stopAudio">
            您的浏览器不支持 HTML5 音频播放
          </audio>
        </div>
      </div>
      <el-button type="danger" circle size="mini" @click="stopAudio" class="close-audio-btn">
        <i class="el-icon-close"></i>
      </el-button>
    </div>
  </div>
</template>

<script>
import service from '@/utils/request'

export default {
  name: 'ClassicsVue',
  filters: {
    truncate(value) {
      if (!value) return '';
      if (value.length <= 100) return value;
      return value.substring(0, 100) + '...';
    }
  },
  data() {
    return {
      loading: false,
      dramaList: [],
      currentPage: 1,
      pageSize: 12,
      total: 0,
      searchQuery: '',
      programTypeList: [],
      selectedTypes: [],
      dramaDetailVisible: false,
      currentDrama: null,
      activeTab: 'video',
      videoPlayerVisible: false,
      currentVideo: null,
      isAudioPlaying: false,
      currentAudio: null,
      favoriteList: [], // 用户收藏的剧目ID列表
      audioProgress: {}, // { [audioId]: { currentTime, duration, playing } }
      currentPlayingAudioId: null,
    };
  },
  created() {
    document.title = '京剧苑 - 经典剧目';
    window.scrollTo(0, 0);
    this.initData();
    this.loadFavorites();
  },
  methods: {
    // 初始化数据
    initData() {
      this.fetchProgramTypes();
      this.fetchDramas();
    },
    
    formatTime(sec) {
      if (!sec) return '00:00';
      const m = Math.floor(sec / 60).toString().padStart(2, '0');
      const s = Math.floor(sec % 60).toString().padStart(2, '0');
      return `${m}:${s}`;
    },
    
    fetchProgramTypes() {
      service.get('/api/content/program/getProgramTypes').then(res => {
        if (res.code === 200) {
          this.programTypeList = res.data;
        } else {
          this.$message.error('获取节目类型失败');
        }
      }).catch(err => {
        this.$message.error('获取节目类型失败：' + err.message);
      });
    },
    
    fetchDramas() {
      this.loading = true;
      
      const params = {
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        dramaName: this.searchQuery,
        token:''
      };
      
      // 如果选择了类型，添加到参数中
      if (this.selectedTypes.length > 0) {
        params.programTypeIds = this.selectedTypes.join(',');
      }
      
      service.get('/api/content/drama/getDramaList', { params })
        .then(res => {
          if (res.code === 200) {
            this.dramaList = res.data.list || [];
            this.total = res.data.total || 0;
            
            // 如果当前页没有数据但总数大于0，回到上一页
            if (this.dramaList.length === 0 && this.total > 0 && this.currentPage > 1) {
              this.currentPage -= 1;
              this.fetchDramas();
              return;
            }
          } else {
            this.$message.error(res.message || '获取剧目列表失败');
          }
        })
        .catch(err => {
          console.error('获取剧目列表出错:', err);
          this.$message.error('获取剧目列表失败，请检查网络连接');
        })
        .finally(() => {
          this.loading = false;
        });
    },
    
    handleSearch() {
      this.currentPage = 1;
      this.fetchDramas();
    },
    
    handleSizeChange(val) {
      this.pageSize = val;
      this.fetchDramas();
    },
    
    handleCurrentChange(val) {
      this.currentPage = val;
      this.fetchDramas();
    },
    
    handleTypeChange() {
      this.currentPage = 1;
      this.fetchDramas();
    },
    
    getTypeIds(typeString) {
      if (!typeString) return [];
      return typeString.split(',');
    },
    
    getTypeName(typeId) {
      const type = this.programTypeList.find(item => item.programTypeId === typeId);
      return type ? type.programTypeName : '';
    },
    
    viewDramaDetail(drama) {
      // 显示加载状态
      const loading = this.$loading({
        lock: true,
        text: '正在加载剧目详情...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      
      // 获取详细信息
      service.get(`/api/content/drama/getDrama/${drama.dramaId}`)
        .then(res => {
          if (res.code === 200) {
            this.currentDrama = res.data;
            this.dramaDetailVisible = true;
          } else {
            this.$message.error(res.message || '获取剧目详情失败');
          }
        })
        .catch(err => {
          console.error('获取剧目详情出错:', err);
          this.$message.error('获取剧目详情失败，请检查网络连接');
        })
        .finally(() => {
          loading.close();
        });
    },
    
    playVideo(video) {
      this.currentVideo = video;
      this.videoPlayerVisible = true;
    },
    
    stopVideo() {
      if (this.$refs.videoPlayer) {
        this.$refs.videoPlayer.pause();
      }
      this.currentVideo = null;
    },
    
    playAudio(audio) {
      this.stopAudio(); // 停止当前播放的音频
      this.currentAudio = audio;
      this.isAudioPlaying = true;
      this.$nextTick(() => {
        if (this.$refs.audioPlayer) {
          this.$refs.audioPlayer.play();
        }
      });
    },
    
    stopAudio() {
      if (this.isAudioPlaying && this.$refs.audioPlayer) {
        this.$refs.audioPlayer.pause();
      }
      this.isAudioPlaying = false;
      this.currentAudio = null;
    },
    
    // 加载用户收藏列表
    loadFavorites() {
      // 检查用户是否登录
      const token = localStorage.getItem('token');
      if (!token) return;

      service.get(`/api/content/drama/favorites/${token}`).then(res => {
        if (res.code === 200 && res.data) {
          this.favoriteList = res.data.map(item => item.dramaId);
        }
      }).catch(err => {
        console.error('加载收藏列表失败:', err);
      });
    },
    
    // 判断剧目是否被收藏
    isFavorite(dramaId) {
      return this.favoriteList.includes(dramaId);
    },
    
    // 切换收藏状态
    toggleFavorite(drama) {
      // 阻止事件冒泡，避免触发查看详情
      event.stopPropagation();
      
      // 检查用户是否登录
      const token = localStorage.getItem('token');
      if (!token) {
        this.$message.warning('请先登录后再收藏');
        this.$router.push('/login');
        return;
      }
      
      const data = {
        dramaId: drama.dramaId,
        token: localStorage.getItem('token')
      }

      const isFavorite = this.isFavorite(drama.dramaId);
      
      // 调用API添加或取消收藏
      const url = isFavorite 
        ? '/api/content/drama/unfavorite'
        : '/api/content/drama/favorite';
      
      service.post(url, data).then(res => {
        if (res.code === 200) {
          if (isFavorite) {
            // 取消收藏
            this.favoriteList = this.favoriteList.filter(id => id !== drama.dramaId);
            this.$message.success('已取消收藏');
          } else {
            // 添加收藏
            this.favoriteList.push(drama.dramaId);
            this.$message.success('收藏成功');
          }
        }
      }).catch(err => {
        console.error('收藏操作失败:', err);
        this.$message.error('操作失败，请稍后重试');
      });
    },
    isAudioPlayingInList(audio) {
      return this.currentPlayingAudioId === audio.audioId && this.audioProgress[audio.audioId]?.playing;
    },
    toggleAudioInList(audio) {
      // 如果当前有其他音频在播放，先暂停
      if (this.currentPlayingAudioId && this.currentPlayingAudioId !== audio.audioId) {
        let prevAudio = this.$refs['audio_' + this.currentPlayingAudioId];
        prevAudio = Array.isArray(prevAudio) ? prevAudio[0] : prevAudio;
        if (prevAudio && prevAudio.pause) prevAudio.pause();
        if (this.audioProgress[this.currentPlayingAudioId]) {
          this.audioProgress[this.currentPlayingAudioId].playing = false;
        }
      }
      let audioEl = this.$refs['audio_' + audio.audioId];
      audioEl = Array.isArray(audioEl) ? audioEl[0] : audioEl;
      if (!audioEl) return;
      if (!this.audioProgress[audio.audioId]) {
        this.$set(this.audioProgress, audio.audioId, { currentTime: 0, duration: 0, playing: false });
      }
      if (audioEl.paused) {
        audioEl.play();
        this.currentPlayingAudioId = audio.audioId;
        this.audioProgress[audio.audioId].playing = true;
      } else {
        audioEl.pause();
        this.audioProgress[audio.audioId].playing = false;
      }
    },
    onAudioTimeUpdateInList(audio) {
      let audioEl = this.$refs['audio_' + audio.audioId];
      audioEl = Array.isArray(audioEl) ? audioEl[0] : audioEl;
      if (!audioEl) return;
      if (!this.audioProgress[audio.audioId]) {
        this.$set(this.audioProgress, audio.audioId, { currentTime: 0, duration: 0, playing: false });
      }
      this.audioProgress[audio.audioId].currentTime = audioEl.currentTime;
    },
    onAudioLoadedInList(audio) {
      let audioEl = this.$refs['audio_' + audio.audioId];
      audioEl = Array.isArray(audioEl) ? audioEl[0] : audioEl;
      if (!audioEl) return;
      if (!this.audioProgress[audio.audioId]) {
        this.$set(this.audioProgress, audio.audioId, { currentTime: 0, duration: 0, playing: false });
      }
      this.audioProgress[audio.audioId].duration = audioEl.duration;
    },
    seekAudioInList(audio, event) {
      let audioEl = this.$refs['audio_' + audio.audioId];
      audioEl = Array.isArray(audioEl) ? audioEl[0] : audioEl;
      if (!audioEl) return;
      audioEl.currentTime = event.target.value;
      this.audioProgress[audio.audioId].currentTime = event.target.value;
    },
    onAudioEndedInList(audio) {
      if (this.audioProgress[audio.audioId]) {
        this.audioProgress[audio.audioId].playing = false;
        this.audioProgress[audio.audioId].currentTime = 0;
      }
      this.currentPlayingAudioId = null;
    },
  }
}
</script>

<style scoped>
.classics-container {
  min-height: 100vh;
  padding-bottom: 50px;
  background-color: #f9f5f0;
}

.banner {
  height: 500px;
  background-image: url('../assets/opera_3.jpg');
  /* background-size: cover; */
  background-position: center;
  position: relative;
  margin-bottom: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.banner:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(139, 0, 0, 0.7), rgba(0, 0, 0, 0.5));
}

.banner-content {
  position: relative;
  z-index: 1;
  text-align: center;
  color: white;
}

.banner-content h1 {
  font-size: 4rem;
  font-family: 'STXingkai', 'STZhongsong', serif;
  margin-bottom: 15px;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6);
  color: #FFD700;
  letter-spacing: 10px;
}

.banner-content p {
  font-size: 1.4rem;
  max-width: 600px;
  margin: 0 auto;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
  letter-spacing: 3px;
}

.introduction-section {
  padding: 60px 10%;
  background-color: #fff;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  margin-bottom: 40px;
}

.intro-content {
  max-width: 900px;
  margin: 0 auto;
}

.intro-content h2 {
  font-size: 2.4rem;
  color: #8B0000;
  margin-bottom: 30px;
  font-family: 'STZhongsong', serif;
  position: relative;
  display: inline-block;
}

.intro-content h2::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 3px;
  background-color: #8B0000;
}

.intro-content p {
  font-size: 1.2rem;
  line-height: 2;
  color: #333;
  margin-bottom: 20px;
  text-align: justify;
}

.filter-section {
  padding: 20px 5%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  margin-bottom: 30px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.search-bar {
  width: 300px;
  max-width: 100%;
  margin-right: 20px;
}

.filter-options {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.filter-item {
  display: flex;
  align-items: center;
}

.filter-label {
  margin-right: 10px;
  font-weight: bold;
  color: #666;
}

.content-section {
  padding: 30px 8%;
  max-width: 1200px;
  margin: 0 auto;
}

.drama-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 30px;
  margin-bottom: 30px;
}

.drama-card {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  cursor: pointer;
  height: 100%;
  display: flex;
  flex-direction: column;
  border: none;
}

.drama-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(139, 0, 0, 0.15);
}

.drama-cover {
  position: relative;
  width: 100%;
  padding-top: 75%; /* 4:3 比例 */
  overflow: hidden;
}

.cover-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.drama-card:hover .cover-image {
  transform: scale(1.05);
}

.drama-type-tags {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: flex-end;
}

.drama-info {
  padding: 1.2rem;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.drama-name {
  font-size: 1.2rem;
  margin: 0 0 0.8rem;
  color: #333;
  font-weight: 600;
}

.drama-description {
  color: #666;
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0;
  flex-grow: 1;
}

.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  padding: 10px 0;
}

.no-data {
  text-align: center;
  padding: 50px 0;
  color: #999;
  background: #f9f9f9;
  border-radius: 8px;
  margin: 20px 0;
}

.no-data i {
  font-size: 3rem;
  margin-bottom: 20px;
}

.no-data p {
  font-size: 1.2rem;
}

/* 剧目详情对话框样式 */
.drama-detail-dialog .el-dialog__body {
  padding: 20px;
}

.drama-detail-header {
  display: flex;
  margin-bottom: 2rem;
  gap: 2rem;
  flex-wrap: wrap;
}

.drama-detail-cover {
  flex: 0 0 300px;
  max-width: 300px;
}

.detail-cover-image {
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.drama-detail-info {
  flex: 1;
  min-width: 300px;
}

.drama-detail-name {
  font-size: 1.8rem;
  margin: 0 0 1rem;
  color: #8B0000;
}

.drama-detail-tags {
  margin-bottom: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.drama-detail-description h4 {
  font-size: 1.2rem;
  margin: 0 0 0.8rem;
  color: #333;
}

.drama-detail-description p {
  color: #555;
  line-height: 1.8;
  text-align: justify;
}

.drama-media-tabs {
  margin-top: 1.5rem;
}

/* 视频列表样式 */
.video-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

.video-item {
  background: #f9f9f9;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
}

.video-item:hover {
  background: #f0f0f0;
  transform: translateY(-3px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.video-thumb {
  height: 150px;
  background: #333;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.play-icon {
  font-size: 3rem;
  color: #fff;
  opacity: 0.8;
  transition: all 0.3s ease;
}

.video-item:hover .play-icon {
  opacity: 1;
  transform: scale(1.1);
}

.video-info {
  padding: 1rem;
}

.video-name {
  font-size: 1rem;
  margin: 0 0 0.5rem;
  color: #333;
}

.video-description {
  font-size: 0.9rem;
  color: #666;
  margin: 0;
}

/* 音频列表样式 */
.audio-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.audio-item {
  display: flex;
  align-items: center;
  padding: 1rem;
  background: #f9f9f9;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.audio-item:hover {
  background: #f0f0f0;
}

.audio-icon {
  font-size: 2rem;
  color: #8B0000;
  margin-right: 1rem;
}

.audio-info {
  flex: 1;
}

.audio-name {
  font-size: 1rem;
  margin: 0 0 0.3rem;
  color: #333;
}

.audio-description {
  font-size: 0.9rem;
  color: #666;
  margin: 0;
}

.audio-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}
.audio-play-btn {
  border: none;
  background: none;
  font-size: 20px;
  cursor: pointer;
  color: #8B0000;
  outline: none;
  padding: 0 6px;
}
.audio-progress-bar {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: #eee;
  accent-color: #8B0000;
}
.audio-time {
  font-size: 13px;
  color: #666;
  min-width: 40px;
  text-align: center;
}

.no-media {
  text-align: center;
  padding: 3rem 0;
  color: #999;
}

.no-media i {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.no-media p {
  font-size: 1.2rem;
}

/* 视频播放器对话框 */
.video-player-dialog .el-dialog__body {
  padding: 0;
}

.video-player-container {
  padding: 1.5rem;
}

.video-player-title {
  font-size: 1.3rem;
  margin: 0 0 1rem;
  color: #333;
}

.video-player {
  width: 100%;
  max-height: 70vh;
  background: #000;
  margin-bottom: 1rem;
}

.video-player-description {
  color: #666;
  line-height: 1.6;
}

/* 音频播放器 */
.audio-player-fixed {
  position: fixed;
  bottom: 20px;
  right: 20px;
  max-width: 400px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  padding: 15px;
  z-index: 1000;
}

.audio-player-info {
  display: flex;
  align-items: center;
  flex: 1;
}

.audio-player-icon {
  font-size: 2.5rem;
  color: #8B0000;
  margin-right: 15px;
}

.audio-player-text {
  flex: 1;
}

.audio-player-title {
  font-size: 1rem;
  margin: 0 0 8px;
  color: #333;
}

.audio-element {
  width: 100%;
  height: 32px;
}

.close-audio-btn {
  margin-left: 15px;
}

/* 响应式调整 */
@media (max-width: 1200px) {
  .filter-section {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .search-bar {
    width: 100%;
    margin-bottom: 15px;
    margin-right: 0;
  }
  
  .filter-options {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .banner-content h1 {
    font-size: 2.5rem;
    letter-spacing: 5px;
  }
  
  .banner-content p {
    font-size: 1.2rem;
    letter-spacing: 1px;
  }
  
  .banner {
    height: 240px;
  }
  
  .filter-options {
    flex-direction: column;
    gap: 10px;
  }
  
  .filter-item {
    width: 100%;
  }
  
  .filter-label {
    min-width: 60px;
  }
  
  .content-section {
    padding: 20px 3%;
  }
  
  .drama-detail-header {
    flex-direction: column;
  }
  
  .drama-detail-cover {
    max-width: 100%;
  }
  
  .audio-player-fixed {
    width: calc(100% - 40px);
  }
  
  .intro-content h2 {
    font-size: 2rem;
  }
}

@media (max-width: 480px) {
  .banner-content h1 {
    font-size: 2rem;
    letter-spacing: 3px;
  }
  
  .banner-content p {
    font-size: 1rem;
  }
}

/* 收藏按钮样式 */
.favorite-btn {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(0, 0, 0, 0.5);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 2;
}

.favorite-btn:hover {
  transform: scale(1.1);
  background: rgba(0, 0, 0, 0.7);
}

.favorite-btn i {
  font-size: 22px;
  color: #ccc;
  transition: all 0.3s ease;
}

.favorite-btn i.is-favorite {
  color: #FFD700;
}

.favorite-btn:hover i {
  color: #fff;
}

.favorite-btn:hover i.is-favorite {
  color: #FFD700;
}
</style> 